<!DOCTYPE html>
<html>
	<head>
		<title>2.1.3-div包div的flex弹性盒模型</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			html, body {
				height: 100%;
				width: 100%;
			}

			body {
                margin: 0;
				--overflow: auto;
				background-color: white;
			}
            
			.div_row1{
				border: solid 3px red;
				height:64px;
				width:100%;
				position: static;
			}
			.div_row1_p1{
				border: solid 2px green;
				height:32px;
				width:80%;
                --float:left;
				--position: static;
                display: flex;
                /*flex-direction: row; 子元素高度等于父的高度，默认就是行 */
                justify-content: flex-start; /*子元素靠始端排列*/
			}
			.div_row1_p1-left{
				border: solid thin blue;
				height:100%;
				width:30%;
                --float:left;
				--position: static;
                /* flex: 1; 自动拉伸 */
                flex: initial; /* 保持原有属性值 */
			}
            
			.div_row2{
				border: solid 3px red;
				height:64px;
				width:100%;
				position: static;
			}
			.div_row2_p1{
				border: solid 2px green;
				height:32px;
				width:80%;
				--position: relative;
 
                display: flex;
				flex-direction: row; /* row | row-reverse | column | column-reverse */
				--flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
				/*justify-content: space-around; 子元素间隔均等*/
                justify-content: center; /*子元素靠始端排列*/
				/*align-items: center; 垂直置中排列*/
                
			}
			.div_row2_p1-center{
				border: solid thin blue;
				height:100%;
				width:30%;
                --float:left;
				--position: relative;
                /* flex: 1; 自动拉伸 */
                flex: initial; /* 保持原有属性值 */
			}
			
			.div_row3{
				border: solid 3px red;
				height:128px;
				width:100%;
				position: static;
			}
			.div_row3_p1{
				border: solid 2px green;
				height:64px;
				width:80%;
                --float:left;
				--position: relative;
                /* text-align: right; 作用被屏蔽 */
                display: flex;
				flex-direction: row; /* row | row-reverse | column | column-reverse */
				--flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
				/*justify-content: space-around; 子元素间隔均等*/
				justify-content: flex-end; /*子元素靠末端排列*/
                --flex-flow: row wrap;
                /*align-content: center; 置中排列*/
                --align-content:  flex-end; /*flex-end 置右排列*/
                align-items: center; /* 垂直置中排列*/
				/*align-items: flex-end; 置右排列*/
 			}
			.div_row3_p1-right{
				border: solid thin blue;
				height:30%;
				width:30%;
                --float:right;
				--position: relative;
                /* flex: 1; 自动拉伸 */
                /* flex: initial; 保持原有属性值 */
			}
            
            .text_left{
                text-align: left;
            }
            .text_center{
                text-align: center;                
            }
            .text_right{
                text-align: right;
            }


		</style>
    </head>
    
	<body>
    2.1.3-div包div的flex弹性盒模型<br>
    <h3>采用flex弹性盒模型，实现左中右布局</h3>
        <div id="div_row1" class="div_row1">
					1.子div元素左靠紧凑排列，绿色框为父DIV（display: flex;justify-content: flex-start;)，蓝色框为子DIV(flex: initial;):<br>
			 <div id="div_row1_p1" class="div_row1_p1">
				 <div id="div_row1_p1_s1" class="div_row1_p1-left text_left" >
                     子div一(内文置左)
				 </div>
				 <div id="div_row1_p1_s2" class="div_row1_p1-left text_center" >
                     子div二(内文置中)
				 </div>
				 <div id="div_row1_p1_s3" class="div_row1_p1-left text_right" >
                     子div三(内文置右)
				 </div>
			 </div>
        </div>
        <br>
        <div id="div_row2" class="div_row2">
					2.子div元素置中间隔均等，绿色框为父DIV（display: flex;justify-content: center;)，蓝色框为子DIV(flex: initial;):<br>
			 <div id="div_row2_p1" class="div_row2_p1">
				 <div id="div_row2_p1_s1" class="div_row2_p1-center text_left" >
                     子div一(内文置左)
				 </div>
				 <div id="div_row2_p1_s2" class="div_row2_p1-center text_center" >
                     子div二(内文置中)
				 </div>
				 <div id="div_row2_p1_s3" class="div_row2_p1-center text_right" >
                     子div三(内文置右)
				 </div>
                 
			 </div>
        </div>
        <br>
        <div id="div_row3" class="div_row3">
					3.子div元素置右，绿色框为父DIV（display: flex;justify-content: flex-end;)，蓝色框为子DIV(flex: initial;):<br>
			 <div id="div_row3_p1" class="div_row3_p1">
				 <div id="div_row3_p1_s1" class="div_row3_p1-right text_left" >
                     子div一(内文置左)
				 </div>
				 <div id="div_row3_p1_s2" class="div_row3_p1-right text_center" >
                     子div二(内文置中)
				 </div>
				 <div id="div_row3_p1_s3" class="div_row3_p1-right text_right" >
                     子div三(内文置右)
				 </div>
			 </div>
        </div>

    </body>

</html>

